<template>
  <div class="basic-dialog">
    <el-dialog
      :model-value="visible"
      v-bind="$attrs"
      :draggable="draggable"
      :before-close="handleClose"
    >
      <el-scrollbar class="pr-[14px]" max-height="60vh">
        <slot></slot>
      </el-scrollbar>
      <template v-if="operation" #footer>
        <slot name="footer" v-if="customFooter"></slot>
        <div class="dialog-footer" v-else>
          <el-button @click="closeDialog"> 取 消 </el-button>
          <el-button type="primary" @click="confirmDialog"> 确 定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
defineProps({
  // 是否显示 Dialog
  visible: {
    type: Boolean,
    default: false
  },
  // 是否有操作（是否显示footer）
  operation: {
    type: Boolean,
    default: false
  },
  // 是否自定义footer
  customFooter: {
    type: Boolean,
    default: false
  },
  // 是否支持拖拽
  draggable: {
    type: Boolean,
    default: true
  }
});
const emit = defineEmits(['update:visible', 'confirmDialog']);

// 提交
const confirmDialog = () => {
  emit('confirmDialog');
};

// 关闭
const closeDialog = () => {
  emit('update:visible', false);
};

// 弹框关闭回调
const handleClose = done => {
  done();
  closeDialog();
};
</script>

<style lang="scss" scoped></style>
